<template>
  <div>
    <!--  折叠面板-->
    <el-collapse v-model="activeNames" accordion style="--el-collapse-header-bg-color: rgb(254,240,240);--el-collapse-border-color: #dcdfe6">
      <el-collapse-item :title="formatTitle(order)" :name="order.order_id" v-for="order in tableData" :key="order.order_id">
        <!--     面板内容-->
        <el-row>
          <el-col :span="8"><strong>顾客编号：</strong>{{order.customer_id}}</el-col>
          <el-col :span="8"><strong>汉服名称：</strong>{{order.hanfu_name}}</el-col>
          <el-col :span="8"><strong>收货地址：</strong>{{order.order_address}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><strong>尺码：</strong>{{order.order_size}}</el-col>
          <el-col :span="8"><strong>数量：</strong>{{order.order_sum}}</el-col>
          <el-col :span="8"><strong>总金额(元)：</strong>{{order.order_price}}</el-col>
        </el-row>
        <el-row>
          <el-col>
            <img :src="'http://localhost:8080/api/file/' + order.hanfu_image" width="100px" height="100px"/>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {adminApi} from "../../api/app";

const tableData = ref();
// 设置折叠面板激活状态（默认激活第一个面板）
const activeNames = ref();
const formatTitle = (order) => order && order.order_id ? `订单 ${order.order_id}` : ''

onMounted(() => {
  adminApi.getAllOrder().then(response => {
    tableData.value = response;
    activeNames.value = tableData.value[0].order_id;
  })
})
</script>

<style scoped>

</style>